<template>
  <div class="giftlist">
    <div class="giftlist__content" v-for="(item, index) in content" :key="index">
      <div class="giftlist__head">
        <img :src="item.icon" class="giftlist__icon" v-if="title">
        <span class="giftlist__title">{{title ? item.gamename : '游戏礼包'}}</span>
      </div>
      <div class="giftlist__body">
        <Item v-for="(itm, idx) in giftlist[index].slice(0, slide[index] || cnt)" :key="idx" :item="itm" :icon="icon"/>
        <p class="giftlist__slide" @click.prevent="handleList(index)" v-if="giftlist[index].length > cnt">
          {{slide[index] !== giftlist[index].length ? '查看更多' : '收起'}}
          <i :class="slide[index] !== giftlist[index].length ? 'darr' : 'uarr'"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Item from './Item'

export default {
  name: 'giftList',
  components: {
    Item
  },
  props: {
    title: {
      type: Boolean,
      default: true
    },
    content: {
      type: Array
    },
    icon: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    giftlist () {
      let list = []
      this.content.map(item => {
        list.push(item.gift_list)
      })
      return list
    }
  },
  data () {
    return {
      cnt: 3,
      slide: []
    }
  },
  methods: {
    handleList (index) {
      this.$set(this.slide, index, this.slide[index] !== this.giftlist[index].length ? this.giftlist[index].length : this.cnt)
    }
  }
}
</script>

<style scoped lang="scss">
.giftlist {
  background-color: #f2f2f2;
  padding-top: 0.01rem;

  &__content {
    background-color: #fff;
    margin: 0.1rem 0;
    padding: 0 0.15rem;
  }

  &__head {
    align-items: center;
    border-bottom: 1px solid #f0f0f0; /* no */
    display: flex;
    padding: 0.1rem 0;
  }

  &__icon {
    border-radius: 0.1rem;
    height: 0.57rem;
    margin-right: 0.14rem;
    width: 0.57rem;
  }

  &__title {
    color: #333;
    flex: 1;
    font-size: 0.17rem;
    font-weight: bold;
  }

  &__slide {
    background-color: #fff;
    color: #999;
    font-size: 0.13rem;
    margin-top: -1px; /* no */
    padding: 0.15rem 0 0.06rem;
    text-align: center;

    .darr {
      vertical-align: 0.02rem;
    }
    .uarr {
      vertical-align: -0.04rem;
    }
  }
}
</style>
